'use client';

import React, { useState, useEffect } from 'react';
import { Tabs } from 'antd';
import { WechatOutlined, MobileOutlined } from '@ant-design/icons';
import { useRouter } from 'next/navigation';
import { useAuth } from '../components/AuthProvider';
import WechatLoginCard from './components/WechatLoginCard';
import SmsLoginCard from './components/SmsLoginCard';
import BindPhoneModal from './components/BindPhoneModal';
import BindWechatModal from './components/BindWechatModal';
import { useOverlayManager } from '@/hooks/useOverlayManager';

type LoginType = 'wechat' | 'sms';

const LoginPage: React.FC = () => {
  const router = useRouter();
  const [activeTab, setActiveTab] = useState<LoginType>('wechat');
  const { openOverlay } = useOverlayManager();
  const { isAuthenticated } = useAuth();

  // 监听登录状态变化，登录成功后跳转
  useEffect(() => {
    if (isAuthenticated) {
      router.push('/instruments');
    }
  }, [isAuthenticated, router]);

  // 处理微信登录首次绑定手机号
  const handleWechatFirstLogin = (userInfo: { openid: string; nickname: string; avatar: string }) => {
    openOverlay({
      name: 'bind-phone-modal',
      Overlay: BindPhoneModal,
      props: {
        userInfo,
        onSuccess: handleBindSuccess,
        onClose: handleCloseModal,
      },
    });
  };

  // 处理短信登录首次绑定微信
  const handleSmsFirstLogin = (userInfo: { phone: string; userId: string }) => {
    openOverlay({
      name: 'bind-wechat-modal',
      Overlay: BindWechatModal,
      props: {
        userInfo,
        onSuccess: handleBindSuccess,
        onClose: handleCloseModal,
      },
    });
  };

  // 绑定成功处理
  const handleBindSuccess = () => {
    // 登录成功，跳转到主页 - 由 useEffect 监听 isAuthenticated 变化处理
  };

  // 关闭弹窗处理
  const handleCloseModal = () => {
    // 弹窗关闭处理
  };

  const tabItems = [
    {
      key: 'wechat',
      label: (
        <span className="flex items-center gap-2 px-2">
          <WechatOutlined />
          微信登录
        </span>
      ),
      children: <WechatLoginCard onFirstTimeLogin={handleWechatFirstLogin} />,
    },
    {
      key: 'sms',
      label: (
        <span className="flex items-center gap-2 px-2">
          <MobileOutlined />
          短信登录
        </span>
      ),
      children: <SmsLoginCard onFirstTimeLogin={handleSmsFirstLogin} />,
    },
  ];

  return (
    <div className="min-h-screen flex items-center justify-center p-8 bg-gradient-to-br from-gray-100 via-gray-50 to-gray-100">
      {/* 外层白色卡片容器 */}
      <div className="w-full max-w-6xl h-[700px] bg-white rounded-2xl shadow-2xl overflow-hidden flex">
        {/* 左侧内容区 */}
        <div className="flex-1 flex flex-col justify-center items-start p-16 bg-gradient-to-br from-slate-800 via-teal-700 to-slate-900 relative overflow-hidden">
          {/* 背景装饰 */}
          <div className="absolute inset-0">
            <div className="absolute top-0 left-0 w-72 h-72 bg-teal-400 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob"></div>
            <div className="absolute top-0 right-0 w-72 h-72 bg-emerald-400 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob" style={{animationDelay: '2s'}}></div>
            <div className="absolute bottom-0 left-1/2 w-72 h-72 bg-cyan-400 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob" style={{animationDelay: '4s'}}></div>
          </div>

          {/* Logo 区域 */}
          <div className="relative z-10 mb-12">
            <div className="flex items-center text-white">
              <div className="w-16 h-16 rounded-xl mr-4 flex items-center justify-center shadow-lg" style={{ background: 'linear-gradient(135deg, #69cac3, #4fb5ad)' }}>
                <span className="text-white font-bold text-2xl">实</span>
              </div>
              <div>
                <div className="text-3xl font-bold">预约系统</div>
                <div className="text-lg opacity-75">Reservation System</div>
              </div>
            </div>
          </div>

          {/* 标题区域 */}
          <div className="relative z-10 text-white max-w-xl">
            <h1 className="text-4xl font-bold mb-6 leading-tight">
              松山湖材料实验室
              <br />
              <span className="bg-gradient-to-r from-teal-300 to-emerald-300 bg-clip-text text-transparent">
                预约管理系统
              </span>
            </h1>
            <p className="text-lg opacity-90 leading-relaxed">
              高效、便捷的实验室设备预约管理平台，为科研工作者提供专业的实验室资源管理服务
            </p>
          </div>
        </div>

        {/* 右侧登录表单区 */}
        <div className="w-[450px] bg-white flex flex-col relative">
          {/* 装饰性边框 */}
          <div className="absolute inset-y-0 left-0 w-1" style={{ background: 'linear-gradient(180deg, #69cac3, #4fb5ad)' }}></div>
          
          {/* 表单内容区域 */}
          <div className="flex-1 flex items-center justify-center px-12 py-8">
            <div className="w-full max-w-sm">
              {/* 标题区域 */}
              <div className="text-center mb-8">
                <h1 className="text-3xl font-bold text-gray-900 mb-2">
                  欢迎登录
                </h1>
                <p className="text-gray-600">
                  请选择您的登录方式
                </p>
              </div>
              
              {/* 登录表单 */}
              <div className="space-y-6">
                <Tabs
                  activeKey={activeTab}
                  onChange={(key) => setActiveTab(key as LoginType)}
                  items={tabItems}
                  centered
                  className="login-tabs-modern"
                  size="large"
                />
              </div>
            </div>
          </div>
          
          {/* 底部信息 */}
          <div className="px-12 py-6 border-t border-gray-100">
            <div className="text-center space-y-2">
              <p className="text-sm text-gray-500">
                登录即表示您同意我们的
                <a href="#" className="text-teal-600 hover:text-teal-700 mx-1 transition-colors">服务条款</a>
                和
                <a href="#" className="text-teal-600 hover:text-teal-700 mx-1 transition-colors">隐私政策</a>
              </p>
              <p className="text-xs text-gray-400">
                © 2024 松山湖材料实验室. 保留所有权利.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default LoginPage; 